<template>
  <div class="card">
    <i 
    class="iconfont icon"
    :class="data.icon"
    :style="{color: data.iconColor}"
    >
    </i>

    <div class="info">
        <p class="title">{{data.title}}</p>
        <p class="num">{{data.num}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        }
    }
};
</script>

<style lang="less" scoped>
.card {
  display: flex;
  width: 100%;
  height: 90px;
  box-shadow: 1px 1px 4px #ccc;
  border-radius: 8px;
  background-color: #fff;
  &:not(:last-child) {
    margin-right: 20px;
  }
  .icon,
  .info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .icon {
    font-size: 40px;
    color: orange;
    font-weight: 700;
  }
  
  .info {
      flex-direction: column;
      .title {
          color: #ccc;
          margin-bottom: 5px;
      }
      .num {
          color: #333;
      }
  }

  @media screen and (max-width: 1000px) {
   .icon {
       flex: 1;
   }
   .info {
       flex: 2;
   }
}

}

// 媒体查询  可以做pc端的屏幕分辨率大小的适配

</style>